<template>
    <!-- 分期付款申请记录查询 -->
    <div
        class="InquiryofInstalment"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <cardComponent pageTitle="特色业务—>分期付款申请记录查询">
            <template slot="cardBody">
                <div class="dialogVisible">
                    <el-form :model="searchFormOne" size="small" label-width="100px">
                        <el-col :span="6">
                            <el-form-item label="账户类别：" label-position="left" prop="mainCardNo">
                                <el-input disabled v-model="accountType" style="width: 100%;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="卡号：" label-position="left" prop="CARDNBR">
                                <el-input
                                    v-model="searchFormOne.CARDNBR"
                                    disabled
                                    style="width: 100%;"
                                ></el-input>

                                <!-- {{ searchFormOne.CARDNBR }} -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" class="btn">
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="hanleSure"
                            >查询</el-button>
                        </el-col>
                    </el-form>
                    <div v-if="disVisible">
                        <el-table
                            :data="tableData"
                            width="100%"
                            border
                            class="heard-bg business_table"
                        >
                            <el-table-column label="分期付款申请编号" prop="APPREF" min-width="130"></el-table-column>
                            <el-table-column label="申请录入日期" prop="INPDATE" min-width="110">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.INPDATE | getDate }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品编号" prop="PRPRDID" min-width="100"></el-table-column>
                            <el-table-column label="商品名称" prop="PRONAME" min-width="125"></el-table-column>
                            <el-table-column label="商品金额" prop="MPAMT" min-width="90">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.MPAMT.toFixed(2) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="期数" prop="NBRMTHS" min-width="80"></el-table-column>
                            <el-table-column label="状态" prop="STATUS" min-width="100">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.STATUS | getSTATUS(MPAPPSTATUS) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="申请来源" prop="INPSRC" min-width="100">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.INPSRC | getINPSRC(APPLYSRC) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="授权日期" prop="AUTHDAY" min-width="100">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.AUTHDAY | getDate}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="请款日期" prop="MATCHDAY" min-width="100">
                                <template slot-scope="scoped">
                                    <span>{{ scoped.row.MATCHDAY | getDate}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="商户编号" prop="MERCHANT" min-width="100"></el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleChangePage('pre')"
                                :disabled="currentApprefIndex <= 0"
                            >上一页</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleChangePage('next')"
                                :disabled="!nextButtonFlag"
                            >下一页</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import {
    reolaceString, strZeroFill, getAccountTypeName, getDictSelectList,
} from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'InquiryofInstalment',
    components: {
        cardComponent,
    },
    data() {
        return {
            searchFormOne: {
                CARDNBR: '',
            },
            disVisible: false,
            isLoading: false,
            tableData: [],
            apprefList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentApprefIndex: 0, // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            accountType: ' ',
            // 分期付款申请状态
            MPAPPSTATUS: [],
            // 申请来源
            APPLYSRC: [],
        };
    },
    async created() {
        this.MPAPPSTATUS = await getDictSelectList('MPAPPSTATUS', this);
        this.APPLYSRC = await getDictSelectList('APPLYSRC', this);
    },
    filters: {
        getDate(val) {
            let text = '';
            val = val.trim();
            if (val) {
                return text = moment(val).format('YYYY-MM-DD');
            }
        },
        // 分期付款状态
        getSTATUS(val, MPAPPSTATUS) {
            let text = '';
            val += ''.trim();
            MPAPPSTATUS.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },
        getINPSRC(val, APPLYSRC) {
            let text = val;
            val += ''.trim();
            APPLYSRC.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    async mounted() {
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this) || this.cardInfo_3004.CATEGORY;
        this.searchFormOne.CARDNBR = this.cardInfo_3004.CARDNO;
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击确定按钮进行查询
        hanleSure() {
            this.disVisible = true;
            this.apprefList = [];
            this.currentApprefIndex = 0;
            this.getCardInfo();
        },
        // 进入页面获取卡信息
        getCardInfo() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                KEYTYPE: this.cardInfo_3004.KEYTYPE,
                CUSTID: this.cardInfo_3004.CUSTID,
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                PIN: '123456', // 密码
                RTNIND: this.apprefList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                APPREF: this.apprefList.length === 0 ? '' : this.apprefList[this.currentApprefIndex], // 首次查询上送空；下翻页查询时 上送最后一条记录中的分期付款申请编号；
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3046';
            defaultParams.body.appBody = appBody;
            // 3046交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '分期');
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList || [];
                        // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                        const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].APPREF;
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        if (!this.apprefList.includes(currentAppref)) {
                            this.apprefList.push(currentAppref);
                            // 保存 当前页最后一条记录的申请编号的索引
                            this.currentApprefIndex = this.apprefList.length - 1;
                        } else { // 已存在
                            this.apprefList.forEach((item, index) => {
                                if (item === currentAppref) {
                                    this.currentApprefIndex = index;
                                }
                            });
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert(
                        '请求失败',
                        '提示',
                        {
                            customClass: 'error', type: 'error',
                        },
                    );
                }
            });
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.apprefList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.getCardInfo();
            } else { // 切换到下一页
                this.getCardInfo();
            }
        },
    },
};
</script>

<style lang='scss'>
.InquiryofInstalment {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    .btn {
        padding-left: 20px;
        text-align: left;
    }
    .el-input__inner {
        width: 100%;
        //   max-width: 200px;
    }
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .dialogVisible {
        // margin:30px auto 0;
        .el-form-item__content {
            text-align: left;
        }
        .footer {
            margin-top: 10px;
            text-align: center;
        }
    }
}
</style>
